<template>
  <form>
    <md-card>
      <md-card-header class="md-card-header-icon md-card-header-green">
        <div class="card-icon">
          <md-icon>perm_identity</md-icon>
        </div>
        <h4 class="title">个人信息</h4>
      </md-card-header>

      <md-card-content>
        <div class="md-layout">
          <div class="md-layout-item md-size-33 md-small-size-100">
            <div class="picture-container">
              <div class="picture">
                <img :src="avatarUrl" class="picture-src" alt="">
                <input id="avatar" type="file" @change="onFileChange">
              </div>
              <h6 class="description">选择图片</h6>
            </div>
          </div>
          <div class="md-layout-item md-size-66 md-small-size-100">
            <md-field>
              <label>邮箱</label>
              <md-input v-model="model.email" type="text" disabled></md-input>
            </md-field>
            <md-field>
              <label>名称</label>
              <md-input v-model="model.name" type="text" disabled></md-input>
            </md-field>
            <md-field>
              <label>性别</label>
              <md-select v-model="model.sex" name="sex">
                <md-option value="男">男</md-option>
                <md-option value="女">女</md-option>
              </md-select>
            </md-field>
            <md-field>
              <label>手机号码</label>
              <md-input v-model="model.phone" type="text"></md-input>
            </md-field>
          </div>
          <div class="md-layout-item md-size-100">
            <md-field maxlength="5">
              <label>关于我</label>
              <md-textarea v-model="model.aboutme"></md-textarea>
            </md-field>
          </div>
          <div class="md-layout-item md-size-100 text-right">
            <md-button class="md-raised md-success mt-4" @click="updateProfile">更新</md-button>
          </div>
        </div>

      </md-card-content>
    </md-card>
  </form>
</template>
<script>

  import {toast} from "@/utils/tools";
  import {post} from '@/utils/ajax';
  import * as api from '@/constants/api';
  import * as mutationKeys from '@/constants/mutation-keys';
  import $ from 'jquery'

  export default {
    name: 'edit-profile-form',
    data () {
      return {
        model:{
          avatar: '',
          email: '',
          name: '',
          sex: '',
          phone: '',
          aboutme: '',
        },
        extList: ['jpg', 'png', 'jpeg'],
      }
    },
    computed:{
      avatarUrl(){
        return this.model.avatar;
        // if(api.HOST.indexOf('localhost')>0){
        //   return api.HOST+this.model.avatar
        // }else{
        //   return this.model.avatar;
        // }
      }
    },
    methods: {
      initModel(){
        this.model = {
          avatar: this.$store.state.userInfo.avatar,
          email: this.$store.state.userInfo.email,
          name: this.$store.state.userInfo.name,
          sex: this.$store.state.userInfo.sex,
          phone: this.$store.state.userInfo.phone,
          aboutme: this.$store.state.userInfo.aboutme,
        }

        if(!this.model.name){
          setTimeout(this.initModel, 300);
        }
      },
      onFileChange(e){
        var files = e.target.files || e.dataTransfer.files;
        if(!files.length){
          return;
        }

        let file = files[0];
        let extList =this.extList.some(ext=>file.name.endsWith(`.${ext}`));
        if(!extList){
          toast(`文件必须是以下类型：${this.extList.join(' ')}`, 'warning')
          $('#avatar').val('')
          return;
        }

        // upload file
        var formData = new FormData();
        formData.append('file', file);
        post(api.UPLOAD, formData, false).then(data=>{
          this.model.avatar = data;
        })
      },
      updateProfile(){
        let errMsg = '';
        if(!this.model.avatar){
          errMsg = '请选择头像';
        }else if(!this.model.email){
          errMsg = '请输入邮箱';
        }else if(!this.model.name){
          errMsg = '请输入姓名'
        }else if(!this.model.sex){
          errMsg = '请选择性别'
        }else if(!this.model.phone){
          errMsg = '请输入手机号码'
        }
        if(errMsg){
          toast(errMsg, 'warning');
          return;
        }

        this.$loading.show();
        post(api.UPDATE_PROFILE, this.model).then(data=>{
          let newUserInfo = {
            ...this.$store.state.userInfo,
            ...this.model,
          }

          this.$store.commit(mutationKeys.SET_USER_INFO, newUserInfo)
          toast('修改成功')
          this.$loading.close();
        }).catch(err=>{
          this.$loading.close();
        })
      }
    },
    mounted(){

    },
    created(){
      this.initModel();
    }
  }

</script>
<style lang="scss" scoped>
  .picture-container{
    position: relative;
    cursor: pointer;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .picture{
      width: 106px;
      height: 106px;
      background-color: #999999;
      border: 4px solid #cccccc;
      color: #ffffff;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      margin: 5px auto;
      overflow: hidden;
      transition: all 0.2s;

      &:hover{
        border-color: #43a047;
      }

      input[type='file']{
        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0 !important;
        position: absolute;
        top: 0;
        width: 100%;
      }
    }

    .picture-src{
      width: 100%;
      height: 100%;
    }

    .description{
      margin: 0;
      margin-bottom: .5rem;
    }
  }
</style>
